<template>
  <div class="_forge-list" :class="{_mobile: isMobile}">
    <div
      class="_forge-item"
      v-for="(item, idx) in forges"
      :key="item.id || idx"
      @click="onViewForge(item)"
    >
      <template v-if="!props.loading">
        <div class="flex items-center justify-between">
          <div class="_forge-won">
            <img :src="item?.head_image" />
          </div>
          <div class="text-primary leading-1.31rem text-1.13rem">
            <span>{{ item?.default_spin_amount_times }}</span>
            <span>x</span>
          </div>
        </div>
        <div class="_forge-product-img">
          <img :src="item?.product?.image" />
        </div>
        <div class="_forge-product-name">
          {{ item?.product?.name }}
        </div>
        <price-btn
          class="mt-0.38rem"
          :price="Number(item?.product?.amount || 0)"
        />
      </template>
      <template v-else>
        <div class="flex items-center justify-center h-full w-full">
          <loading class="!w-2.5rem" :track-width="6" />
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { onBuriedPoint } from "@/api/user";
import Loading from "@/components/Loading/loading.vue";
import PriceBtn from "@/components/PriceBtn/price-btn.vue";
import { useMedia } from "@/hooks/useMedia";

import { hotForgeProps } from "./hotForge";

const props = defineProps(hotForgeProps);

const router = useRouter();
const isMobile = useMedia();

const forges = computed(() => {
  if (props.loading) {
    return new Array(5).fill(0);
  }
  return props.forge;
});

function onViewForge(forge: API.Home.HotForgeItem) {
  router.push({
    path: "/forge",
    query: {
      forge_id: forge.id,
    },
  });
  onBuriedPoint({
    page_name: "首页",
    action: "点击按钮",
    button_name: "forge详情",
    forge_id: forge.id + "",
  });
}
</script>

<style lang="less" scoped>
._forge-list {
  @apply flex items-stretch;
  gap: 1.38rem;
  ._forge-item {
    @apply relative flex flex-col flex-1 w-0 text-center cursor-pointer;
    padding: 1rem;
    aspect-ratio: 11.31 / 13.94;
    min-height: 0;
    border-radius: var(--el-border-radius-base);
    background-color: var(--realbox-bg-box);
    &:active {
      opacity: 0.8;
    }

    ._forge-product-img {
      @apply flex-1 h-0 w-full;
      margin: 0.81rem 0;
      img {
        @apply w-full h-full;
        object-fit: contain;
      }
    }

    ._forge-product-name {
      color: #9d9d9d;
      font-size: 0.88rem;
      line-height: 1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    ._forge-won {
      img {
        width: 1.25rem;
        height: 1.25rem;
      }
    }
  }
  
  &._mobile {
    @apply flex-wrap;
    gap: 0.81rem;
    ._forge-item {
      flex: auto;
      width: calc((100% - 0.81rem) / 2);
    }
  }
}
</style>
